<template>
    <div class="headercom">
        <jinritoutiao theme="multi-color" size="20" :fill="['#000', '#f5f5f5', '#313131', '#313131']" :strokeWidth="2" />
        <span style="margin-left: 10px;font-size: 20px;">新闻发布系统</span>

        <div style="display:inline-block ; margin-left: 70px; line-height: 70px;">
            <el-breadcrumb :separator-icon="ArrowRight">
                <el-breadcrumb-item v-for="item in tabs " :to="item.path" :key="item.path">{{ item.meta.title
                }}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>

        <div style="display:inline-block ; float: right">
            <el-button type="primary" @click="Logout"><el-icon>
                    <SwitchButton />
                </el-icon>登出</el-button>
        </div>

        <div style="display:inline-block ; float: right; cursor: pointer; margin-right: 10px;">
            <el-avatar>{{ store.username }}</el-avatar>
        </div>

    </div>
</template>

<script setup lang="ts">
import { DocumentCopy, ArrowRight, SwitchButton } from '@element-plus/icons-vue'
import { Jinritoutiao } from '@icon-park/vue-next'
import { onMounted, watch, ref, Ref } from 'vue';
import { useRoute, RouteLocationMatched, useRouter } from 'vue-router';
import { usestore } from '../store';
import api from '../api/api';
import { ElMessage } from 'element-plus';

const route = useRoute()
const router = useRouter()

const store = usestore()


const tabs: Ref<RouteLocationMatched[]> = ref([])


const getBreadcrumd = () => {
    //获取所有全部meta和title
    const nextmac = route.matched.filter(item => item.meta && item.meta.title)
    tabs.value = tabs.value.concat(nextmac)
    for (let i = 0; i < tabs.value.length - 1; i++) {
        if (nextmac[0].path === tabs.value[i].path) {
            tabs.value.splice(i, 1)
        }
    }
}

watch(() => route.path, () => getBreadcrumd())

const Logout = () => {
    api.Adminlogout().then(
        res => {
            if (res.data.code == 200) {
                ElMessage({
                    message: '登出成功',
                    type: 'success'
                })
                localStorage.removeItem('token')
                localStorage.removeItem('username')
                localStorage.removeItem('identity')
                router.push({
                    name: 'login'
                })
            }
        }).catch(err => console.log(err))
}

onMounted(() => {
    getBreadcrumd()

})
</script>

<style scoped></style>